<script type="text/x-template" id="alerts-home">
    <div id="alerts-view" v-bind:class="[componentId]">
        <cly-header>
            <template v-slot:header-left>
                <h2> {{i18n('alert.plugin-title')}}
                </h2>
                <span class="cly-vue-tooltip-icon ion-help-circled color-cool-gray-50" style="margin-left:10px;" v-tooltip.top-center="i18n('alert.tips')">
                </span>
            </template>
            <template v-slot:header-right>
            <el-button type="success" icon="el-icon-circle-plus" v-if="canUserCreate" @click="createAlert">{{i18n('alert.Add_New_Alert')}}</el-button>
        </template>
        </cly-header>
    
        <cly-main>
            <div class="bu-mb-4 cly-vue-section__content white-bg" v-if="!shouldHideCount">
                <cly-metric-cards>
                    <cly-metric-card  :columnWidth=4 :color="item.color" :number="item.percent" :key="idx" v-for="(item, idx) in countData">
                            {{i18n(item.label)}}
                        <template v-slot:number>{{item.value || 0}}</template>
                    </cly-metric-card>	
                </cly-metric-cards>	
             </div>
      
            <div class="bu-mt-6">
                <table-view  v-on:open-drawer="openDrawer" :callCreateAlertDrawer="createAlert"></table-view>
            </div>
        </cly-main>
        <drawer @close="closeDrawer" :controls="drawers.home"></drawer>
    </div>
    </script>
    
    
<script  type="text/x-template" id="alerts-table">
<div>
    <cly-empty-view 
        v-if="(rowTableRows.length === 0 && initialized)"
        :title="i18n('alerts.empty-title')"
        :subTitle="i18n('alerts.empty-subtitle')"
        :actionTitle="i18n('alerts.empty-action-button-title')"
        :hasAction="canUserCreate"
        :actionFunc="createAlert"
    />
    <cly-section v-else>
        <cly-datatable-n
            :force-loading="!initialized"
            class="cly-vue-alerts-table"
            :tracked-fields="localTableTrackedFields"
            :rows="tableRows" :resizable="false" >
            <template v-slot:header-left="scope">
                <div class="alerts-table-app-selector">
                    <cly-select-x
                       :placeholder="i18n('alert.all-applications')"
                       mode="multi-check"
                       v-model="filteredApps"
                       :options="appsSelectorOption">
                    </cly-select-x>
                </div>
            </template> 
            <template v-slot="scope">
                <el-table-column type="switch" fixed="left" width="88"  prop="enabled">
                    <template v-slot="rowScope">
                        <el-switch :value="rowScope.row.enabled" :disabled="!rowScope.row._canUpdate"
                            class="bu-ml-4  bu-mr-2"
                            @input="scope.patch(rowScope.row, {enabled: !rowScope.row.enabled})">
                        </el-switch>
                    </template>
                </el-table-column>
               
                <el-table-column fixed min-width="240"  prop="alertName" :label="i18n('alert.Alert_Name')" sortable="true">
                    <template slot-scope="scope">
                        <div style="text-overflow: ellipsis; overflow: hidden;" v-html="scope.row.alertName"></div>
                    </template>
                </el-table-column> 
    
                <el-table-column  min-width="175"  sortable="true"  prop="appNameList" :label="i18n('alert.Application')">
                </el-table-column>
    
                <el-table-column  min-width="415" prop="condtionText"  sortable="true"  :label="i18n('alert.Condition')">
                    <template slot-scope="scope" sortable="true">
                        <span>{{scope.row.condtionText}}</span>
                    </template>
                </el-table-column>
                
                <el-table-column  min-width="130" sortable="true"  prop="createdByUser" :label="i18n('alert.CreateBy')">
                    <template slot-scope="scope">
                        <div class="bu-level">
                            <div class="bu-level-left">
                                <div class="is-created-by-col">
                                    {{scope.row.createdByUser}}
                                 </div>
                            </div> 
                        </div>
                    </template>
                </el-table-column>
              
                
                <el-table-column type="options">
                    <template v-slot="rowScope">
                        <cly-more-options v-if="rowScope.row.hover && (rowScope.row._canUpdate || rowScope.row._canDelete)" size="small" @command="handleAlertEditCommand($event,rowScope)">
                            <el-dropdown-item v-if="rowScope.row._canUpdate" icon="el-icon-document-copy" command="edit-comment">
                                {{i18n('alert.Edit')}}
                            </el-dropdown-item>
                            <el-dropdown-item v-if="rowScope.row._canDelete" icon="el-icon-delete" command="delete-comment">
                                {{i18n('alert.Delete')}}
                            </el-dropdown-item>
                        </cly-more-options>
                    </template>
                </el-table-column>
            </template>
            <template v-slot:bottomline="scope">
                <cly-diff-helper :diff="scope.diff" @discard="scope.unpatch()" @save="updateStatus(scope)">
                </cly-diff-helper>
            </template>
        </cly-datatable-n>
    </cly-section>
</div>
</script>
    
    
    
<script  type="text/x-template" id="alert-drawer">
    <cly-drawer
        @submit="onSubmit"
        @close="onClose"
        @copy="onCopy"
        :size=6
        :title="title"
        :saveButtonLabel="saveButtonLabel"
        v-bind="$props.controls"  ref="drawerData">>
        <template v-slot:default="drawerScope">
            <cly-form-step id="alert-drawer-main">
            
            <cly-form-field name="alertName" :label="i18n('alert.Alert_Name')" rules="required">
                <el-input
                    v-model="drawerScope.editedObject.alertName"
                    class="bu-is-flex" 
                    :placeholder="i18n('alert.enter-alert-name')">
                </el-input>
            </cly-form-field>

            <cly-form-field name="dataType" :label="i18n('alert.Data_type')" rules="required">
                <el-radio-group v-on:change="dataTypeSelected" v-model="drawerScope.editedObject.alertDataType" class="bu-is-flex alert-data-type-block">
                    <el-radio-button v-for="(item, idx) in alertDataTypeOptions" :key="idx" :label="item.value" :disabled="drawerScope.editedObject._id && drawerScope.editedObject.alertDataType !== item.value">{{item.label}}</el-radio-button>
                </el-radio-group>
            </cly-form-field>

            <cly-form-field name="apps" :label="i18n('alert.For_Applications')" rules="required">
                <cly-app-select 
                        :auth='{"feature": "alerts", "permission":  drawerScope.editedObject._id ? "u": "c"}'
                        class="bu-is-flex"
                        @change="onAppChange"
                        v-model="drawerScope.editedObject.selectedApps"
                        :allowAll="allowAll"
                        >
                </cly-app-select>
            </cly-form-field> 
            
            <div class="bu-my-4 bu-py-4 cly-vue-alert-drawer__card">
                <div class="cly-vue-drawer-step__line cly-vue-drawer-step__line--aligned bu-px-4">
                    <div class="text-small text-heading">
                        {{i18n('alert.Alert_definition')}} 
                    </div>
                    <div class="color-cool-gray-50 text-small bu-mb-1" style="line-height: 18px;">
                        {{i18n('alert.compare-remind')}}
                    </div>
                </div>
                <div class="cly-vue-alert-drawer__line">
                </div>
       
                <div class="bu-is-flex bu-mx-2 bu-mt-4 bu-mb-2 bu-px-1" v-if="showSubType1">
                    <div class="bu-is-flex-grow-1 bu-mx-1">
                        <validation-provider name="alertDataSubType" rules="required" v-slot="v">
                            <cly-select-x
                                :searchable="false"
                               :placeholder="i18n('alert.select-metric')"
                               mode="single-list"
                               v-on:change="alertDataSubTypeSelected"
                               v-model="drawerScope.editedObject.alertDataSubType"
                               :class="{'is-error': v.errors.length > 0, 'bu-is-flex':true, }"
                               :options="drawerScope.editedObject.alertDataType && alertDefine[drawerScope.editedObject.alertDataType].target || []">
                            </cly-select-x>
                        </validation-provider>
                    </div>
                    <div class="bu-is-flex-grow-1 bu-mx-1" v-if="showSubType2">
                        <validation-provider name="alertDataSubType" rules="required" v-slot="v">
                            <cly-select-x
                            :placeholder="i18n('alert.select-metric')"
                               mode="single-list"
                               v-model="drawerScope.editedObject.alertDataSubType2"
                                :class="{'is-error': v.errors.length > 0, 'bu-is-flex':true, }"
                               :options="alertDataSubType2Options|| []">
                            </cly-select-x>
                        </validation-provider>
                    </div>
                    <div class="bu-is-flex-grow-1 bu-mx-1" v-if="showCondition">
                        <validation-provider name="alertDataSubType" rules="required" v-slot="v">
                            <cly-select-x
                            :placeholder="i18n('alert.define-variable')"
                               mode="single-list"
                               v-model="drawerScope.editedObject.compareType"
                                :class="{'is-error': v.errors.length > 0, 'bu-is-flex':true}"
                               :options="drawerScope.editedObject.alertDataType && alertDefine[drawerScope.editedObject.alertDataType].condition || []">
                            </cly-select-x>
                        </validation-provider>
                    </div>
                    <div class="bu-is-flex-grow-1 bu-mx-1 compare-value-block" v-if="showConditionValue">
                        <validation-provider name="name" rules="required" v-slot="v">
                            <el-input
                                :placeholder="i18n('alert.add-number')"
                                v-model="drawerScope.editedObject.compareValue"
                                :class="{'is-error': v.errors.length > 0, 'bu-is-flex': true}"
                            >
                            <i slot="suffix"> % </i>
                            </el-input>
                        </validation-provider>
                    </div>

                    <!-- online users threshold-->
                    <div class="bu-is-flex-grow-1 bu-mx-1" v-if="drawerScope.editedObject.alertDataSubType === 't'">
                        <validation-provider name="alertDataSubType" rules="required" v-slot="v">
                            <cly-select-x
                            :placeholder="i18n('alert.define-variable')"
                               mode="single-list"
                               v-model="drawerScope.editedObject.compareType"
                                :class="{'is-error': v.errors.length > 0, 'bu-is-flex':true}"
                               :options="drawerScope.editedObject.alertDataType && alertDefine[drawerScope.editedObject.alertDataType].condition || []">
                            </cly-select-x>
                        </validation-provider>
                    </div>
                    <div class="bu-is-flex-grow-1 bu-mx-1 compare-value-block" v-if="drawerScope.editedObject.alertDataSubType === 't'">
                        <validation-provider name="name" rules="required" v-slot="v">
                            <el-input
                                :placeholder="i18n('alert.add-number')"
                                v-model="drawerScope.editedObject.compareValue"
                                :class="{'is-error': v.errors.length > 0, 'bu-is-flex': true}"
                            >
                            <i slot="suffix"> Users </i>
                            </el-input>
                        </validation-provider>
                    </div>
                    <div class="bu-is-flex-grow-1 bu-mx-1 text-medium" v-if="drawerScope.editedObject.alertDataSubType === 't'" style="line-height:30px; white-space: nowrap;">
                        persists for
                    </div>
                    <div class="bu-is-flex-grow-1 bu-mx-1 compare-value-block" v-if="drawerScope.editedObject.alertDataSubType === 't'">
                        <validation-provider name="name" rules="required" v-slot="v">
                            <el-input
                                :disabled="drawerScope.editedObject._id"
                                :placeholder="i18n('alert.add-number')"
                                v-model="drawerScope.editedObject.compareValue2"
                                class="bu-is-flex"
                            >
                            <i slot="suffix"> Minutes </i>
                            </el-input>
                        </validation-provider>
                    </div>
                </div>
            </div>

            <cly-form-field name="alertValues" :label="i18n('alert.email-to-receive')" rules="required">
                <cly-select-email v-model="drawerScope.editedObject.alertValues" :collapse-tags="false"></cly-select-email>
            </cly-form-field>
 
            <pre v-if="0">
                {{drawerScope.editedObject}}
            </pre>
        </cly-form-step>
        </template>
    </cly-drawer>
</script>